<template>
  <!-- 设备类型详情 -->
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="addSysformData" :model="formData" label-width="auto">
      <el-row>
        <el-col :span="24">
          <el-form-item label="上级类型" prop="parentId">
            <treeselect
              v-model="formData.parentId"
              :show-count="false"
              :options="equOptions"
              placeholder=""
              no-options-text="暂无菜单"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型名称" prop="typeName">
            <el-input v-model="formData.typeName" readonly size="medium" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="类型排序" prop="orderNum">
            <el-input-number v-model="formData.orderNum" disabled size="medium" style="width: 100%" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="">
            <label slot="label" v-html="`备&emsp;&emsp;注`" />
            <el-input v-model="formData.remark" readonly :rows="3" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
// 菜单下拉树用的的方法和样式
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { detailProspectType, treeProspectType } from '@/api/superviseBaseInfo/typeManage/equipmentType'
export default {
  name: 'DetailDialog',
  components: {
    treeselect
  },
  data() {
    return {
      equOptions: [],
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        parentId: null, // 父级id
        typeName: '', // 类型名称
        orderNum: '', // 类型排序
        remark: '' // 备注
      }
    }
  },
  methods: {
    // 初始化弹框
    handleAdd(title, id) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.getDetailById(id)
      this.getTreeMenu()
    },
    async getTreeMenu() {
      const { data } = await treeProspectType()
      this.equOptions = data
    },
    // 详情获取
    async getDetailById(id) {
      const { data } = await detailProspectType(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    // 确定
    submitForm() {
      this.dialogVisible = false
    }
  }
}
</script>

